<template>
	<view id="app">
		<scroll-view enable-flex scroll-y="true" class="scrollView">
			<view class="cards" v-for="(item,index) in datas" :key="index">
				<view class="name">
					{{ item.data.value.propertyName }} :  <span class="num"> {{ item.data.value.formatValue }} </span>
				</view>
				<view class="timeString">
					更新时间 : {{ item.data.timeString }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	 import {
	    onLoad
	  } from "@dcloudio/uni-app";
	import { onMounted, ref } from 'vue'
	import {
		getEquipmentDetails,
		getEquipmentData
	} from "../../api/details.js"
	let id = ref('')
	onLoad((option) => {
		id.value = option.id
	});
	onMounted(() => {
	  equipmentDetails()
	})
	let token = ref(uni.getStorageSync('token'))
	async function equipmentDetails(){
		let res = await getEquipmentDetails(token.value,id.value)
		let parameter = res.data.result
		equipmentData(parameter)
	}
	let datas = ref([])
	async function equipmentData(parameter){
		if (parameter) {
			let properties = []
			let propertiess = JSON.parse(parameter.metadata).properties
			propertiess.map((item)=>{
				properties.push(item.id)
			})
			let data = [
				{
					dashboard:parameter.deviceType.value,
					dimension:"history",
					measurement:"properties",
					object:parameter.protocol,
					params:{
						deviceId:parameter.id,
						history:1,
						properties:properties
					}
				}
			]
			let res = await getEquipmentData(token.value,data)
			datas.value = res.data.result
		}
		
		
		
	}
</script>

<style lang="scss" scoped>
#app{
	width: 100vw;
	height: 100vh;
	.scrollView{
			  width: 100vw;
			  height: 100vh;
			  overflow: hidden;
			  background-color: #DDDDDD;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  flex-wrap: wrap;
			  .cards{
				  border-radius: 20rpx;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-around;
				  width: 90vw;
				  color: #666;
				  font-size: 28rpx;
				  height: 140rpx;
				  margin-top: 50rpx;
				  overflow: hidden;
				  background-color: #fff;
				  .name{
					  margin-left: 30rpx;
					  .num{
						   color: #222;
						   font-weight: 600;
						   font-size: 40rpx;
					  }
				  }
				  .timeString{
				  	  margin-left: 30rpx;
				  }
			  }
	}
}
</style>

